<template>
    <section v-loading="listLoading">
        <div class="box-card mt-20">
            <el-row>
                <el-col :span="12">
                    <el-form ref="univNanme" :rules="rules" :model="tableData.correctiveReportDto" label-width="80px">
                        <el-form-item label="报告名称" prop="title">
                            <el-input v-model="tableData.correctiveReportDto.title"></el-input>
                        </el-form-item>
                    </el-form>
                     <!--<div class="grid-content title">
                        <p>
                           <span>整改状态 :</span> {{ dict.corrected_progress_status[tableData.correctiveReportDto.status] }}  &nbsp;
                        </p>
                    </div>-->
                </el-col>
                <el-col :span="6" :offset="6"  align="right">
                    <el-button @click="()=>this.$router.go(-1)"> 返 回 </el-button>
                    <el-button :disabled="listLoading || saveLoading" type="primary" @click="saveReport('univNanme')"> 保 存 </el-button>
                </el-col>
                <el-col :span="24">
                    <div>
                        <span style="font-size: 16px; color: rgb(51, 51, 51);">检查综合意见</span>
                        <p style=" color: #666;line-height: 28px; margin:0 0 35px;">{{tableData.correctiveReportDto.current_edu_opinion}}</p>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-tabs v-model="activeName" @tab-click="tabHandleClick">
                    <el-tab-pane :label="'整改区 ( ' + reformNumber + '项 )'" name="corrected">
                        <el-col :span="24">
                            <div class="item-colum ">
                                <span class="item-column-title" style="font-size:16px; color:#333">整改工作情况</span>
                                <el-input
                                        type="textarea"
                                        v-model="tableData.correctiveReportDto.suggestion"
                                        :autosize="{ minRows: 6}"
                                        show-word-limit
                                        resize="none"
                                        maxlength="800"
                                        placeholder="请填写对于整改隐患而采取的措施及方法，文字限制在800字以内。"
                                ></el-input>
                            </div>
                            <ul class="corrected-item">
                                <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                    <div v-show="item.correctiveItemDto.status === 1">

                                        <p class="check-item-desc">
                                             <span>
                                                        <span style="color:#67c23a;font-size:13px;" v-if="item.correctiveItemDto.audit===1">合格 &nbsp;&nbsp;</span>
                                                        <span style="color:red;font-size:13px;"  v-else-if="item.correctiveItemDto.audit===2">不合格&nbsp;&nbsp;</span>

                                                 </span>
                                            {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}

                                          
                                            <span class="show-or-hiddn">
                                                
                                                <el-button type="text" @click="isShow(item.is_show, index)">
                                                    {{ formatToggle(item.is_show) }}
                                                </el-button> <br>
                                                <el-button v-if="tableData.correctiveReportDto.lastCorrectiveReportId===null" type="text" @click="setCorrectedState(item.checkItemDescDTO.id, 2)">暂不整改</el-button>
                                            </span>
                                        </p>

                                     
                                        <div v-if="item.is_show">
                                         
                                        <div class="item-title-s step1">
                                            检查信息
                                        </div>
                                 
                                        <div class="item-content">
                                            <div class="check-item-images item-column" v-show="item.checkItemDescDTO.image_list.length !== 0">
                                                <span class="item-column-title">图片</span>
                                                <ul class="image-list">
                                                    <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                        <img :src="basis_url + imageItem.path" alt="" @click="handlePictureCardPreview({url:basis_url + imageItem.path})" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="check-item-building-room item-column">
                                                <span class="item-column-title">涉及房间</span>
                                                <div>
                                                    <el-tag
                                                            v-for="(tagRoom, index) in item.checkItemDescDTO.building_room"
                                                            :key="index"
                                                            type="success"
                                                            style="margin-right:15px;"
                                                    >
                                                        {{tagRoom.building}}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="check-item-building-info item-column">
                                                <span class="item-column-title">问题描述</span>
                                                <p>

                                                    <el-input
                                                            :autosize="{ minRows: 2}"
                                                            type="textarea"
                                                            class="showTextConter"
                                                            resize="none"
                                                            v-model="item.checkItemDescDTO.desc"
                                                            readonly>
                                                    </el-input>
                                                </p>
                                            </div>
                                            
                                        </div>
                                            
                                            <div class="check-item-corrected item-column">
                                                  <div class="item-title-s step2">
                                                    整改信息
                                                        <el-button
                                                                style="float:right;"
                                                                type="primary"
                                                                size="small"
                                                                @click="addCheckItemInfo(index)"
                                                        >
                                                       <strong><i class="el-icon-plus"></i></strong> 整改内容
                                                    </el-button>
                                                </div>
                                            </div>
                                            <el-row :gutter="40" v-for="(checkItemInfo, checkItemindex) in item.correctiveItemDto.check_item_info" :key="checkItemindex" :id="'items-column-row-item-'+ index + 'item' + checkItemindex">
                                                <div class="items-column-row">
                                                    <el-col :span="24">
                                                    <span class="items-column-row-title">
                                                        整改内容 {{checkItemindex + 1}}
                                                         <el-button
                                                                 style="float:right;color:#f00"
                                                                 type="text"
                                                                 @click="delCheckItemInfo(index, checkItemindex)"
                                                                 >
                                                             删除
                                                    </el-button>
                                                    </span>
                                                    </el-col>
                                                    <el-col :span="24">
                                                        <div class="check-item-effect-images items-column-row-column">
                                                            <span class="item-column-title">图片<span style="font-size: 14px"> (至多上传十张图片)</span></span>
                                                            <el-upload
                                                                    class="avatar-uploader"
                                                                    action=""
                                                                    multiple
                                                                    :class="checkItemInfo.images.length >= 10 ? 'uplaod-img-but-hid': ''"
                                                                    :data={index:checkItemindex,itemIndexId:item.correctiveItemDto.id}
                                                                    list-type="picture-card"
                                                                    :http-request="httpRequest"
                                                                    :file-list="checkItemInfo.images"
                                                                    :on-remove="(file, fileList) => handleRemove(file, fileList, item.correctiveItemDto.id, checkItemindex)"
                                                                    :on-preview="handlePictureCardPreview"
                                                                    :limit="10"
                                                                    :on-exceed="handleImgExceed"
                                                                    :before-upload="beforeAvatarUpload">
                                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                                            </el-upload>
                                                        </div>
                                                    </el-col>
                                                   
                                                    <el-col :span="24">
                                                        <div class="check-item-cause items-column-row-column">
                                                            <span class="item-column-title">原因分析</span>
                                                            <el-input
                                                                     :autosize="{ minRows: 4}"
                                                                    :maxlength="800"
                                                                    ref='reason'
                                                                    type="textarea"
                                                                    v-model="checkItemInfo.reason"
                                                        
                                                                    placeholder="请输入原因分析，文字限制在800字以内"
                                                            ></el-input>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="24">
                                                        <div class="check-item-effect items-column-row-column">
                                                            <span class="item-column-title">整改措施与结果</span>
                                                            <el-input
                                                                    :autosize="{ minRows: 4}"
                                                                    :maxlength="800"
                                                                    type="textarea"
                                                                    v-model="checkItemInfo.measure"
                                                                    :rows="10"
                                                                    placeholder="请输入整改措施，文字限制在800字以内"
                                                            ></el-input>
                                                        </div>
                                                    </el-col>

                                                       <el-col :span="24">
                                                        <div class="check-item-effect-file items-column-row-column" style="padding: 0 0 20px;">
                                                            <el-upload
                                                                    class="upload-demo item-upload"
                                                                    style="margin-left:0"
                                                                    action=""
                                                                    :data={index:checkItemindex,itemIndexId:item.correctiveItemDto.id}
                                                                    :limit="1"
                                                                    :on-exceed="handleExceed"
                                                                    :on-remove="(file, fileList) => handleRemoveFile(file, fileList, item.correctiveItemDto.id, 'files', checkItemindex)"
                                                                    :http-request="(file, fileList) => httpRequestForFlie(file, fileList, 'files')"
                                                                    :file-list="checkItemInfo.files"
                                                                    :before-upload="checkFileUpdateState"
                                                            >
                                                                <el-button type="text" style="font-size:22px; padding:5px!important;"> <span style=" font-size:14px; color:#333;">附件 </span><i class="el-icon-document"></i></el-button>
                                                                <!--<div slot="tip" class="el-upload__tip">只能上传本地PDF文件，且不超过2M</div>-->
                                                            </el-upload>
                                                        </div>
                                                    </el-col>
                                                </div>

                                              
                                            </el-row>

                                            <div>
                                                <div class="item-title-s step3">
                                                    批注信息
                                                </div>
                                                <div class="item-content" style="margin-top:20px;"  v-if="item.correctiveItemDto.audit && item.correctiveItemDto.audit!==0">
                                                    <div>
                                                        <el-tag type="success" v-if="item.correctiveItemDto.audit===1">合格</el-tag>
                                                        <el-tag type="danger" v-else>不合格</el-tag>

                                                    </div>
                                                    <div>
                                                        <el-input
                                                         :autosize="{ minRows: 2}"
                                                           class="showTextConter"
                                                                readonly=""
                                                                type="textarea"
                                                              
                                                                v-model="item.correctiveItemDto.audit_reason">
                                                        </el-input>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </el-col>
                    </el-tab-pane>
                    <el-tab-pane :label=" '待整改区 ( ' +  unReformNumber + ' 项  )'" name="unCorrected" v-show="paneShow">
                        <el-col :span="24">
                            <ul class="corrected-item">
                                <li v-for="(item, index) in tableData.correctiveItems" :key="index">
                                    <div v-show="item.correctiveItemDto.status === 2">
                                        <p class="check-item-desc">
                                            {{ item.checkItemDescDTO.check_item_three_order_number + ' ' + item.checkItemDescDTO.check_item_three }}
                                     
                                            <span class="show-or-hiddn">
                                                <el-button type="text" @click="isShow(item.is_show, index)">
                                                    {{ formatToggle(item.is_show) }}
                                                </el-button> <br>
                                                <el-button  @click="setCorrectedState(item.checkItemDescDTO.id, 1)" type="text">立即整改</el-button>
                                            </span>
                                        </p>
                                        
                                        <div v-if="item.is_show" class="item-content">
                                            <div class="item-title-s step1">
                                            检查信息
                                        </div>
                                            <div class="check-item-images item-column" v-show="item.checkItemDescDTO.image_list.length !== 0">
                                                <span class="item-column-title">图片</span>
                                                <ul class="image-list">
                                                    <li v-for="(imageItem, index) in item.checkItemDescDTO.image_list" :key="index">
                                                        <img :src="basis_url + imageItem.path" @click="handlePictureCardPreview({url:imageItem})" />
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="check-item-building-room item-column">
                                                <span class="item-column-title">涉及房间</span>
                                                <div>
                                                    <el-tag
                                                            v-for="(tagRoom, tagRoomindex) in item.checkItemDescDTO.building_room"
                                                            :key="tagRoomindex"
                                                            type="success"
                                                            style="margin-right:15px;"
                                                    >
                                                        {{tagRoom.building}}
                                                    </el-tag>
                                                </div>
                                            </div>
                                            <div class="check-item-building-info item-column">
                                                <span class="item-column-title">问题描述</span>
                                                <p>
                                                    <el-input
                                                            :autosize="{ minRows: 4}"
                                                            type="textarea"
                                                            resize="none"
                                                            class="showTextConter"
                                                            v-model="item.checkItemDescDTO.desc"
                                                            readonly>
                                                    </el-input>
                                                </p>
                                            </div>
                                              <div class="item-title-s step1">
                                            未整改信息
                                            </div>
                                            <div class="item-content" >
                                            <div class="check-item-corrected item-column">
                                                <span class="item-column-title" style="font-size:14px; font-weight:bold;">未整改原因及未来整改计划</span>
                                                <el-input
                                                 :autosize="{ minRows: 4}"
                                                        style="margin-top:15px;"
                                                        type="textarea"
                                                        v-model="item.correctiveItemDto.no_reason"
                                                        :rows="8"
                                                        placeholder="请输入未整改原因及未来整改计划，文字限制在200字以内。"
                                                ></el-input>
                                            </div>
                                            <div class="check-item-effect-file item-column" style="padding:0;">
                                                <el-upload
                                                        class="upload-demo item-upload"
                                                        style="margin-left:0"
                                                        action=""
                                                        :data={index:index,itemIndexId:item.correctiveItemDto.id}
                                                        :limit="1"
                                                        :on-exceed="handleExceed"
                                                        :on-remove="(file, fileList) => handleRemoveFile(file, fileList, item.correctiveItemDto.id, 'no_reason_files')"
                                                        :http-request="(file, fileList) => httpRequestForFlie(file, fileList, 'no_reason_files')"
                                                        :file-list="item.correctiveItemDto.no_reason_files"
                                                >
                                                    <el-button type="text" style="font-size:22px; padding:5px!important; margin-top:25px;"><span class="item-column-title" style="font-weight: bold; font-size:14px;">附件 <i class="el-icon-document" style="color:#409EFF;font-size:18px;"></i></span></el-button>
                                                    <!--<div slot="tip" class="el-upload__tip">只能上传本地PDF文件，且不超过2M</div>-->
                                                </el-upload>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </el-col>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </div>
        <el-dialog :visible.sync="dialogShowImages">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </section>
</template>

<script>
    import dict from '../../common/js/dict';
    import {update_img, upload_file, getResourceUrl} from '../../api/common';
    import {saveScanId} from '../../api/report_manager_api'
    import { getCorrectedProgressData,updateCorrectedProgressData } from '../../api/corrected_api'

    import lrz from "lrz";
    export default {
        data() {
            return {
                //表格数据
                dict:dict,
                tableData: {
                    correctiveReportDto: {
                        title: ''
                    },
                    correctiveItems:[]
                },
                paneShow:true,
                reformNumber:0,
                unReformNumber:0,
                corrective_report_id: this.$route.params.id,
                basis_url: '',
                activeName:'corrected',
                dialogImageUrl:'',
                dialogShowImages:false,
                listLoading:true,
                saveLoading:false,
                rules:{
                    title:[
                        { required: true, message: '请输入报告名称', trigger: 'blur' },
                    ]
                }

            }
        },
        created() {
            this.getTableData()
           
        },
        mounted(){
            //   this.$nextTick(() => {
            //     this.$refs.reason.resizeTextarea();
            // })
            
        },
        methods: {
            getTableData() {
                getCorrectedProgressData({corrective_report_id:this.$route.params.id}).then(res => {
                    if (res.data.status == 200) {
                        let temp_data = JSON.parse(res.data.datas);
                        temp_data.correctiveItems.map((item, index) => {
                            if(item.correctiveItemDto.status == 1) this.reformNumber ++
                            if(item.correctiveItemDto.status == 2) this.unReformNumber ++
                            if(item.correctiveItemDto.check_item_info == null){
                                item.correctiveItemDto.check_item_info = [{
                                    reason:'',
                                    measure:'',
                                    images:[],
                                    files:[]
                                }]
                            }else {
                                item.correctiveItemDto.check_item_info.map((itemItem) =>{
                                    if(itemItem.images == null){
                                        itemItem.images = []
                                    } else {
                                        itemItem.images.map((item, index) => {
                                            item.url = this.basis_url + item.path
                                        })
                                    }
                                    if(itemItem.files == null) {
                                        itemItem.files = []
                                    } else {
                                        itemItem.files.map((item, index) => {
                                            item.url = this.basis_url + item.path
                                            item.name = item.origin_name
                                        })
                                    }
                                })
                            }
                            if(item.correctiveItemDto.no_reason_files === null) {
                                item.correctiveItemDto.no_reason_files = []
                            } else {
                                item.correctiveItemDto.no_reason_files.map((fileitem, index) => {
                                    fileitem.url = this.basis_url + fileitem.path
                                    fileitem.name = fileitem.origin_name
                                })
                            }
                        })
                           setTimeout(()=>{
                                this.paneShow = false
                        },200)
                        this.tableData = temp_data;
                        this.listLoading = false;
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                })
            },
            isShow(state, index){
                if(state) {
                    this.$set(this.tableData.correctiveItems[index],'is_show' , false)
                    return
                }
                this.$set(this.tableData.correctiveItems[index],'is_show' , true)
            },
            formatToggle(state) {
                if (state) {
                    return '收起';
                }
                return '展开';
            },
            saveReport(formName) {
               
                // if(!this.tableData.correctiveReportDto.suggestion||this.tableData.correctiveReportDto.suggestion === '') return this.$message.error('请填写整改工作情况');
                if( this.fileLoading ) return this.$message.error('当前一个附件正在上传，请等待上传成功再保存');
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.saveLoading = true;
                        updateCorrectedProgressData(this.tableData).then(res => {
                            if (res.data.status == 200) {
                                if(res.data.status === 200) {
                                    this.$notify({
                                        title: '提示',
                                        message: '保存成功！',
                                        type: 'success',
                                        duration: 2000
                                    })
                                }
                                this.$router.push('/univ_corrected/detail/' + this.tableData.correctiveReportDto.id )
                            }  else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.msg);
                                this.saveLoading = false;
                            }
                        }).catch(err => {
                            this.$message.error(err);
                            this.saveLoading = false
                        })
                    } else {
                        this.$notify({
                            title: '提示',
                            message: '信息不完整，请检查必填项',
                            type: 'warning',
                            duration: 2000
                        })
                        return false
                    }
                })
            },
            setCorrectedState(id,state) {
                this.tableData.correctiveItems.map(item => {
                    if(item.checkItemDescDTO.id === id) item.correctiveItemDto.status = state
                })
                if(state === 1){
                    this.activeName = 'corrected'
                    this.reformNumber ++
                    this.unReformNumber --
                } else {
                    this.reformNumber --
                    this.unReformNumber ++
                }
            },
            handleRemove(file, fileList,itemId,checkItemIndex) {
                this.tableData.correctiveItems.map((item, index) => {
                    if(item.correctiveItemDto.id == itemId){
                        item.correctiveItemDto.check_item_info[checkItemIndex].images = fileList
                    }
                })
            },

            handleRemoveFile(file, fileList,itemId, type, checkItemindex) {
                this.tableData.correctiveItems.map((item, index) => {
                    if(item.correctiveItemDto.id == itemId){
                        if(type == 'files'){
                            item.correctiveItemDto.check_item_info[checkItemindex].files = fileList
                        }else{
                            item.correctiveItemDto[type] = fileList
                        }
                    }
                })

            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogShowImages = true;
            },
            beforeAvatarUpload(file) {
                const splitLength = file.name.toLowerCase().split('.').length;
                const extension = file.name.toLowerCase().split('.')[splitLength - 1];
                const extension_array = ['jpg', 'png', 'jpeg'];
                const isJPG = (extension_array.indexOf(extension) > -1);
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleImgExceed(files, fileList) {
                this.$message.warning(`至多上传十张图片`);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制添加文件数量为 1 个文件。`);
            },
            httpRequest(item) {
                let formData = new FormData();
                lrz(item.file, {
                    width: 1280 //设置压缩参数
                }).then((rst) => {
                    this.importLoading = true
                    formData = rst.formData
                    update_img(formData).then((res) => {
                        let result = JSON.parse(res.data.datas);
                        this.importLoading = false
                        if (res.data.status == 200) {
                            this.tableData.correctiveItems.map((itemItem, index) => {
                                if(itemItem.correctiveItemDto.id == item.data.itemIndexId){
                                    itemItem.correctiveItemDto.check_item_info[item.data.index].images.push({
                                        id: result.id,
                                        url: result.url
                                    })
                                }
                            })
                        } else {
                            if (res.data.status === 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.msg);
                        }
                    });
                }).catch(function (err) {
                    this.$message.error('压缩失败');
                }).always(function () {
                    // 清空文件上传控件的值
                    e.target.value = null
                })

            },
            checkFileUpdateState(){
                if( this.fileLoading ) {
                    this.$message.error('前一个附件正在上传，请稍后再次上传');
                    return false;
                }
            },
            httpRequestForFlie(item,fileLists,type) {
                this.fileLoading = true;
                let formData = new FormData();
                formData.append('file', item.file);
                upload_file(formData).then((res) => {
                    let result = JSON.parse(res.data.datas);
                    if (res.data.status == 200) {
                        this.tableData.correctiveItems.map((itemItem, index) => {
                            if(itemItem.correctiveItemDto.id == item.data.itemIndexId){
                                if(type == 'files'){
                                    itemItem.correctiveItemDto.check_item_info[item.data.index][type].push({
                                        name: item.file.name,
                                        url: result.file_url,
                                        id: result.id
                                    })
                                } else {
                                    itemItem.correctiveItemDto[type]= [{
                                        name: item.file.name,
                                        url: result.file_url,
                                        id: result.id
                                    }]
                                }
                            }
                        })
                        this.fileLoading = false;
                    } else {
                        if (res.data.status === 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                        this.fileLoading = false;
                    }
                });
            },
            tabHandleClick(tab, event) {
            },
            addCheckItemInfo(index) {
                let params = {
                    reason:'',
                    measure:'',
                    images:[],
                    files:[]
                }
                this.tableData.correctiveItems[index].correctiveItemDto.check_item_info.push(params)
                this.$nextTick(() => {
                    document.getElementById('items-column-row-item-' + index + 'item' + (this.tableData.correctiveItems[index].correctiveItemDto.check_item_info.length - 1)).scrollIntoView();
                })
            },
            delCheckItemInfo(parentIndex, itemIndex) {
                this.$confirm('确定要删除此条整改内容吗？', '删除整改内容', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    this.tableData.correctiveItems[parentIndex].correctiveItemDto.check_item_info.splice(itemIndex,1)

                });
            }
        }
    }
</script>
<style lang="scss">
    .item-content{
        padding:0 20px;
    }
    .item-column{
        padding-top:30px;
    }
    .el-textarea__inner{
        font-size:13px;
    }
    .box-card .items-column-row{
        background:#fafafa!important
    }
</style>
<style scoped lang="scss" >
    .mt-20{
        margin-top: 20px;
    }
    .check-item-effect-file{
        min-height:50px
    }
    .box-card{
        padding:5px 25px;
        .el-input__inner {
            height: 33px;
            font-size: 13px;
            box-shadow: none;
            border: 1px solid #e9e9e9;
        }
        .grid-content{
            &.title{
                h4{
                    font-size:24px;
                    color:#101010;
                    margin:0;
                }
                p{
                    display:inline-block;
                    max-width:240px;
                    width:32%;
                    color:#333;
                    span{
                        color:#888;
                    }
                }
            }
        }
        .edu-opinion{
            padding:30px 0 20px;
            span{
                &.item-column-title{
                    font-size:18px;
                    color:rgba(102, 102, 102, 1);
                    line-height:26px;
                    display: block;
                }
            }
            p{
                font-size:14px;
                color:rgba(102, 102, 102, 1);
                line-height:24px;
            }
        }
        .univ-conclusion{
            padding:20px 0 0;
            border: 1px solid #dcdfe6;
            span{
                &.item-column-title{
                    font-size:18px;
                    color:rgba(102, 102, 102, 1);
                    line-height:26px;
                    padding:0 20px 10px;
                    display: block;
                }
            }
            .el-textarea{
                textarea.el-textarea__inner{
                    border:none;
                }
            }
        }
        .corrected-title{
            font-size:18px;
            color:#101010;
            padding:35px 0 10px;
            line-height:18px;
        }
        .items-column-row{
            background:#fbfbfb;
            overflow:hidden;
                margin: 0 20px 20px;
    padding: 20px 20px;
            .items-column-row-title{
                line-height: 20px;
                display: block;
                font-size:16px;
                padding: 20px 0 10px;
                font-weight: bold;
                color: #333;
            }
            .items-column-row-column{
                margin: 20px 0 0px;
            }
        }
        .corrected-item{
            list-style:none;
            padding-left:0;
            li > div{
                border:1px solid #e6e6e6;
                padding:20px;
                float: left;
                margin:10px 0;
                width: 100%;
                box-sizing: border-box;
                .check-item-desc{
                    font-size:16px;
                    color:#333;
                    line-height:28px;
                    width:100%;
                    margin:0;
                    padding-right:100px;
                    box-sizing: border-box;
                    position:relative;
                    .show-or-hiddn{
                        position:absolute;
                        right:0;
                        top:-15px;
                        text-align:right;
                        width: 100px;
                        .el-button--text.el-button{
                            padding:0 5px!important;
                        }
                    }
                }
                >div{
                  
                    .top-border{
                        border-top:1px solid #e6e6e6;
                        margin-top: 35px;
                        span.item-column-title{
                            color:#333;
                            font-size:22px;
                        }
                    }
                    .image-list{
                        width:100%;
                        height:100px;
                        padding:0;
                        display:table;
                        li{
                            width:100px;
                            height:100px;
                            float:left;
                            list-style:none;
                            padding:0;
                            border:1px solid #efefef;
                            margin-right:15px;
                            overflow:hidden;
                            img{
                                width:100%;
                                height:100%;
                            }
                        }
                    }
                    p{
                        font-size:14px;
                        color:rgba(102, 102, 102, 1);
                        line-height:24px;
                        margin:0;
                    }
                    span{
                        &.item-column-title{
                            font-size: 14px;
                            font-weight: bold;
                            color: #333;
                            display: block;
                            margin-bottom: 10px;
                            line-height: 26px;
                        }
                    }
                }
            }
        }
    }
</style>
<style lang="scss">
    .univ-conclusion{
        .el-textarea{
            textarea.el-textarea__inner{
                border:none;
                padding: 5px 20px;
            }
        }
    }
    .item-colum.univ-conclusion .el-textarea .el-input__count {
        float:right;
        margin-right:20px;
        color:#666;
    }
    ul.corrected-item{
        .el-upload--picture-card{
            height:100px;
            width:100px;
            line-height:106px;
        }
        .avatar-uploader{
            ul{
                li{
                    width:100px;
                    height:100px;
                }
            }
        }
    }
    .uplaod-img-but-hid .el-upload--picture-card{
        display:none;
    }

</style>
